<template>
  <div>
    <div class="main">
      <Carousel :items="detailData.ImgUrls"></Carousel>
      <h1>{{detailData.name}}</h1>
      <h3 class="price_area">{{detailData.price}}</h3>
      <p class="types">{{detailData.types}} in {{detailData.saleOrrent}}</p>
      <div class="property_description">
        <h4 class="panel-title">Property Description</h4>
        <p v-for="(item, index) in detailData.description" :key="index">{{item}}</p>
      </div>
      <div class="property_description">
        <h4 class="panel-title">Property Address</h4>
        <p>
          <strong>Adress:</strong>
          {{detailData.adress}}
        </p>
        <p>
          <strong>City:</strong>
          {{detailData.city}}
        </p>
        <p>
          <strong>Area:</strong>
          {{detailData.area}}
        </p>
        <p>
          <strong>Zip:</strong>
          {{detailData.zip}}
        </p>
        <p>
          <strong>Country:</strong>
          {{detailData.country}}
        </p>
      </div>
      <div class="property_description">
        <h4 class="panel-title">Property Details</h4>
        <p v-for="(item, index) in detailData.details" :key="index">
          <strong>{{item[0]}}</strong>
          {{item[1]}}
        </p>
      </div>
      <div class="property_description">
        <h4 class="panel-title">Property Features</h4>
        <p v-for="(item, index) in detailData.features" :key="index">{{item}}</p>
      </div>
      <div class="property_description">
        <h4 class="panel-title">Walkscore步行指数</h4>
        <p>
          {{detailData.walkscore}}
          <a :href="detailData.walkscoreurl">查看详情</a>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import Carousel from "@/components/Carousel";

export default {
  name: "Detail",
  data() {
    return {
      detailData: []
    };
  },
  activated() {
    console.log(222);
    this.getData();
  },
  methods: {
    getData() {
      const id = this.$route.params.id;
      this.$http.get(`/api/getDetail/${id}`).then(({ data }) => {
        const list = data.details;
        const details = [];
        for (let i = 0; i < list.length; i++) {
          for (let [key, value] of Object.entries(list[i])) {
            details.push([key, value]);
          }
        }
        this.detailData = { ...data, details };
        console.log(this.detailData);
      });
    }
  },
  mounted() {
    console.log(222);
    this.getData();
  },
  components: {
    Carousel
  }
};
</script>
<style lang="scss">
.main {
  text-align: center;

  h1,
  h3 {
    text-align: center;
  }
  .types {
    font-size: 18px;
    font-weight: 600;
  }
}
.price_area {
  font-size: 22px;
  color: rgb(43, 57, 144);
  font-weight: 600;
}
.property_description {
  text-align: left;
  background-color: #fff;
  width: 94%;
  padding: 10px 10px;
  box-sizing: border-box;
  margin: 20px auto;
  border-radius: 10px;
  .panel-title {
    color: #000;
    margin: 10px 0;
    font-size: 20px;
    font-weight: 800;
  }
  p {
    color: #5c727d;
    margin: 6px;
    strong {
      color: #000;
    }
  }
}
</style>